<!-- 重新分配人员 -->
<template>
  <div class="Reassign-personnel-con">
    <div class="item-row tip"><a-icon type="warning" style="margin: 0 10px;"/>停用后，下列企业无绑定的内部员工，请重新分配开票员！</div>
    <div class="item-row form">
      分配开票员：<a-select v-model="form.user" style="width: 120px" @change="selectChange" placeholder="请选择开票员">
        <a-select-option v-for="(item, index) in optionList" :key="'option-item-'+index" :value="item.value">{{item.label}} </a-select-option>
      </a-select>
    </div>
    <div class="item-row">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
        style="width: 100%;"
        bordered
        :scroll="{y:400}"
      />
    </div>
    <div class="item-row btn-group">
      <a-button type="" @click.prevent="goBackEvent" style="margin: 0 5px;">返回一步 </a-button>
      <a-button type="primary" @click.prevent="nextEvent" style="margin: 0 5px;">下一步 </a-button>
    </div>
  </div>
</template>

<script>
import getDataDB from '@/api/InvoiceIssuer.js'
import tableConfig from './utils/tableConfig'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'ReassignPersonnel',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      tableData: [],
      columns:tableConfig('ReassignPersonnel'),
      selectedRowKeys: [],
      selectedRows:[],
      form:{
        user:''
      },
      kpyInfoList:{},
      oldKpyInfoList:{},
      optionList:[ ]
    };
  },
  // 监听属性 类似于data概念
  computed: { },
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
       if (!this.isType.isNullOrUnDef(val) && !this.isType.isEmpty(val)) {
          if (val.detail && val.detail) {
            this.oldKpyInfoList = val.detail
          }
          if (val.user && val.user&& val.user.id) {
            this.form.user = val.user.id
          }
          if (val.table && val.table) {
            this.tableData = val.table
          } else {
            this.tableData = val
          }
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getKPYList()
  },
  // 方法集合
  methods: {
    getKPYList(){
      const param = {
        bizType: '1', // 管理端 1  企业端  2
        ignoreId: this.oldKpyInfoList.id
      }
      getDataDB('开票人下拉列表查询', param).then(res => {
        if (res.success== true) {
          const tempObj = {}
          const tempArr = res.result.map(item=>{
            tempObj[item.id] = item
            return {...item, label: item.name, value: item.id }
          })
          this.kpyInfoList = tempObj
          this.optionList = tempArr
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows
    },
    selectChange(value){},
    // 下一步
    nextEvent(){
      if (this.isType.isEmpty(this.form.user)) {
        this.$message.warning('请选择开票员后再进行操作！')
        return false
      }
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要重新分配的数据后再进行操作！')
        return false
      }
      // let label = ''
      // this.optionList.forEach(item=>{
      //   if(item.value === this.form.user) {
      //     label = item.label
      //   }
      // })
      this.closeEvent(false,{type:'rp-next', data: {table:this.selectedRows, user: this.kpyInfoList[this.form.user]}})
    },
    goBackEvent(){
      this.closeEvent(false,{type:'rp-goback', data: this.data})
    },
  },
  }
</script>
<style lang='less'>
.Reassign-personnel-con{
  width: 100%;
  display: flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction: column;
  // padding: 10px 0;
  box-sizing: border-box;

  .item-row{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    margin: 5px 0;
    &.tip{
      color: #E6A23C;
    }
    &.btn-group{
      justify-content:center;

    }
    &.form{

    }
  }
}
</style>
